<template>
    <div id="TopMemuRoot">
        <div class="TopMemuItem">
            <div @click="backView(backViewShow)" class="Icon" v-show="backIcon"><el-icon size="200%">
                    <ArrowLeft />
                </el-icon></div>
        </div>
        <div class="TopMemuItem text">
            <slot></slot>
        </div>
        <div class="TopMemuItem">

        </div>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router"
import { getCurrentInstance, watch, toRefs } from "vue";


// 公共变量中转站
let global_Object = getCurrentInstance().appContext.config.globalProperties

const props = defineProps({
    backViewShow: {
        default: true,
    },
    backIcon: {
        default: false
    }
})

let { backIcon } = toRefs(props);

let backView = global_Object.$BackView

</script>
<style lang="less" scoped>
#TopMemuRoot {
    height: 5%;
    width: 100%;
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;

    .text {
        padding-bottom: 4%;
        font-size: 120%;
    }

    .TopMemuItem {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 5%;

        .Icon {
            display: flex;
            justify-content: center;
            align-self: center;
            width: 100%;
        }
    }
}
</style>